<template>
  <div class="search">
    <a-form :model="tableData" name="basic" layout="inline" autocomplete="off" v-bind="layout">
      <a-form-item label="应用状态" name="dsmStatus">
        <a-select v-model:value="tableData.dsmStatus" allow-clear placeholder="请选择" style="width: 140px" :options="options" />
      </a-form-item>
      <a-form-item label="数据源名称" name="dsmName">
        <a-input v-model:value="tableData.dsmName" placeholder="请输入" style="width: 140px" />
      </a-form-item>
      <a-form-item>
        <a-button @click="reset">重置</a-button>
      </a-form-item>
      <a-form-item><a-button type="primary" @click="searchDataBase">查询</a-button></a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { CodeTableStatus } from '@/enums/statusEnum';
  import { getDataBaseListHooks } from '@/hooks/DatabaseManagementHooks/getDataBaseListHooks';
  const { tableData, getList } = getDataBaseListHooks();
  const layout = {
    labelCol: { span: 12 },
    wrapperCol: { span: 16 },
  };
  // 选择器的三种状态
  const options: {
    value: number;
    label: String;
  }[] = [
    {
      value: CodeTableStatus.未发布,
      label: '未发布',
    },
    {
      value: CodeTableStatus.已发布,
      label: '已发布',
    },
    {
      value: CodeTableStatus.已停用,
      label: '已停用',
    },
  ];
  // 重置
  const reset = () => {
    tableData.dsmName = '';
    tableData.dsmStatus = undefined;
    tableData.pageNum = 1;
    tableData.pageSize = 10;
    getList();
  };
  // 查询
  const searchDataBase = () => {
    tableData.pageNum = 1;
    tableData.pageSize = 10;
    getList();
  };
</script>

<style lang="less" scoped>
  .search {
    margin-left: 2%;
    width: 70%;
  }
</style>
